<template>
  <div class=" box-ruleForm" v-loading="loading">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"
      :label-position="device == 'mobile' ? 'top' : 'right'">
      <el-form-item label="单位" prop="clientName">
        <el-input v-model.trim="ruleForm.clientName" placeholder="请输入单位名称" :maxLength="50" />
      </el-form-item>
      <el-form-item label="联系人" prop="contactName">
        <el-input v-model.trim="ruleForm.contactName" placeholder="请输入联系人名称" :maxLength="10" />
      </el-form-item>
      <el-form-item label="联系电话" prop="contactPhone">
        <el-input v-model.trim="ruleForm.contactPhone" placeholder="请输入联系电话" :maxLength="20" />
      </el-form-item>
      <el-form-item label="产品名称" prop="product">
        <el-input v-model.trim="ruleForm.product" placeholder="请输入产品名称" :maxLength="40" />
      </el-form-item>
      <el-form-item label="描述信息" prop="remark">
        <el-input v-model.trim="ruleForm.remark" type="textarea" placeholder="请输入描述信息" :maxLength="500" />
      </el-form-item>
      <el-form-item label="图片信息">
        <el-upload class="upload-demo" ref="upload" action="#" multiple :limit="9" :on-change="handleChange"
          :on-remove="handleRemove" :file-list="fileList" :auto-upload="false" accept=".jpg,.jpeg,.png,.gif">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
        </el-upload>
      </el-form-item>
    </el-form>
    <div class=" box-footer">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-button type="primary" @click="submitForm('ruleForm')" style="width: 100%;">立即创建</el-button>
        </el-col>
        <el-col :span="12">
          <el-button @click="resetForm('ruleForm')" style="width: 100%;">重置</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import ResizeMixin from '@/layout/mixin/ResizeHandler'
import { addDataApi, uploadImgApi } from "@/api/after/serve";

export default {
  name: "AddAfterVue",
  mixins: [ResizeMixin],
  data() {
    return {
      // 加载
      loading: false,
      // 表单数据
      ruleForm: {
        id: null,
        workorderId: null,
        type: "售后维修",
        clientName: "",
        contactName: "",
        contactPhone: "",
        product: "",
        image: "",
        remark: "",
        status: "",
        createBy: "客户自助"
      },
      // 表单校验规则
      rules: {
        clientName: [
          { required: true, message: '请输入单位名称', trigger: 'blur' }
        ],
        contactName: [
          { required: true, message: '请输入联系人名称', trigger: 'blur' }
        ],
        contactPhone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' }
        ],
        product: [
          { required: true, message: '请输入产品名称', trigger: 'blur' }
        ],
      },
      // 图片列表
      fileList: []
    }
  },
  computed: {
    ...mapGetters([
      'device'
    ]),
  },
  methods: {
    // 删除图片
    handleRemove(file, fileList) {
      this.fileList = fileList
    },
    // 选中图片
    handleChange(file, fileList) {
      this.fileList = fileList
    },
    // 上传全部图片
    async uploadImg() {

      const list = (this.fileList ?? []).map((item) => {
        const formData = new FormData()
        formData.append('file', item.raw)
        return uploadImgApi(formData)
      })

      const imgList = (await Promise.all(list) ?? []).map(item => item?.fileName ?? "") ?? []
      this.ruleForm.image = imgList.join(',')
    },
    async addHandler() {
      const res = await addDataApi(this.ruleForm)
      if (res.code === 200) {
        this.$message({
          message: res.msg,
          type: 'success'
        });
        this.$refs.upload.clearFiles()
        this.fileList = []
        this.resetForm('ruleForm')
      }
      this.loading = false
    },
    // 提交表单
    submitForm(formName) {
      // 1、校验必填字段
      // 2、整理图片链接字段
      // 3、提交表单
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          try {
            this.loading = true
            await this.uploadImg()
            this.addHandler()
          } catch (error) {
            console.log("🚀 ~ this.$refs[formName].validate ~ error:", error)
            this.loading = false
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
}
</script>

<style lang="scss" scoped>
.box-ruleForm {
  box-sizing: border-box;
  padding: 12px 12px 60px;
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;

  .box-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 12px;
    background: #ffffff;
  }
}
</style>
